﻿<%@ Page Title="平均流持续时间分析" Language="C#" MasterPageFile="~/AnalysisMaster.Master" AutoEventWireup="true" CodeBehind="DurationAnalysis.aspx.cs" Inherits="NetFlow.DurationAnalysis" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container-fluid">
        <h2 class="text-center mt-4">平均流持续时间分析</h2>

        <div class="row mt-4">
            <!-- 区域 1: 持续时间区间统计（柱状图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">持续时间区间统计</div>
                    <div class="card-body">
                        <canvas id="durationBucketBarChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 2: 持续时间变化趋势（折线图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">持续时间变化趋势</div>
                    <div class="card-body">
                        <canvas id="durationTrendChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <!-- 区域 3: 持续时间占比（饼图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">持续时间占比</div>
                    <div class="card-body">
                        <canvas id="durationPieChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 4: 持续时间消耗（雷达图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">持续时间消耗</div>
                    <div class="card-body">
                        <canvas id="durationRadarChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof durationBuckets !== 'undefined' && typeof netFlowData !== 'undefined') {
                // 持续时间区间统计（柱状图）
                var ctx1 = document.getElementById('durationBucketBarChart').getContext('2d');
                var bucketLabels = Object.keys(durationBuckets);
                var bucketValues = Object.values(durationBuckets);

                new Chart(ctx1, {
                    type: 'bar',
                    data: {
                        labels: bucketLabels,
                        datasets: [{
                            label: '区间数量',
                            data: bucketValues,
                            backgroundColor: 'rgba(54, 162, 235, 0.6)'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 持续时间变化趋势（折线图）
                var ctx2 = document.getElementById('durationTrendChart').getContext('2d');
                var timeLabels = netFlowData.map((_, index) => `时间 ${index + 1}`);
                var durationValues = netFlowData.map(item => item.FlowDuration);

                new Chart(ctx2, {
                    type: 'line',
                    data: {
                        labels: timeLabels,
                        datasets: [{
                            label: '持续时间 (毫秒)',
                            data: durationValues,
                            borderColor: 'red',
                            fill: false
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 持续时间占比（饼图）
                var ctx3 = document.getElementById('durationPieChart').getContext('2d');
                var protocolAggregated = aggregateData(netFlowData, 'Protocol', 'FlowDuration', x => x);
                var protocolLabels = Object.keys(protocolAggregated);
                var protocolValues = Object.values(protocolAggregated);

                new Chart(ctx3, {
                    type: 'pie',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            data: protocolValues,
                            backgroundColor: ['#FF5733', '#33FF57', '#3357FF', '#FFD700']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 持续时间消耗（雷达图）
                var ctx4 = document.getElementById('durationRadarChart').getContext('2d');
                var protocolAggregated = aggregateData(netFlowData, 'Protocol', 'FlowDuration', x => x);
                var protocolLabels = Object.keys(protocolAggregated);
                var protocolValues = Object.values(protocolAggregated);

                new Chart(ctx4, {
                    type: 'radar',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            label: '持续时间 (毫秒)',
                            data: protocolValues,
                            backgroundColor: 'rgba(75, 192, 192, 0.4)',
                            borderColor: 'green'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            } else {
                console.error("No data available.");
            }
        });

        function aggregateData(data, keyField, valueField, aggregator) {
            return data.reduce((acc, item) => {
                const key = item[keyField];
                if (!acc[key]) {
                    acc[key] = 0;
                }
                acc[key] += aggregator(item[valueField]);
                return acc;
            }, {});
        }
    </script>
</asp:Content>